<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>	
		img{
			width: 234px;
			margin: 15px 5px 0px;
			/*opacity: 0.3;
			filter: alpha(opacity:30);*/
			/*display: none;*/
		}
		
	</style>
	<script src="jquery3.1.0.js"></script>
	<script>
	$("window").ready(function(){
		$("img").mouseover(function(){
			$(this).css("box-shadow","0px 10px 10px #575850");
			$(this).css("transform","translate(0px,-10px)");
			// $(this).css("opacity","1");
			// $(this).css("filter","alpha(opacity:100)");
		});
		$("img").mouseout(function(){
			$(this).css("box-shadow","none");
			$(this).css("transform","none");
			// $(this).css("opacity","0.3");
			// $(this).css("filter","alpha(opacity:30)");
		});
		// $("div:eq(2)").mouseover(function () {
		// 	$("div:eq(3)").slideDown();
		// });
		// $("div:eq(2)").mouseout(function () {
		// 	$("div:eq(3)").slideUp();
		// });
	})
	</script>
	<!-- <script>
		window.onload=function (){
			document.getElementsByTagName('img')[0].onmouseover=function (){
				//alert(1);
				this.style.boxShadow= "0px 15px 15px #575850";
				this.style.transform="translate(0px,-10px)";
			}
			document.getElementsByTagName('img')[0].onmouseout=function (){
				//alert(1);
				this.style.boxShadow= "0px 0px 0px #fff";
				this.style.transform="translate(0px,0px)";
			}
		}
	</script> -->
</head>
<body>
	<div>
		<img src="one.jpg" alt="">
		<img src="two.jpg" alt="">
		<img src="three.jpg" alt="">
	</div>
	<div>
		<img src="three.jpg" alt="">
		<img src="two.jpg" alt="">
		<img src="one.jpg" alt="">
	</div>
</body>
</html>